<template>
  <van-form>
    <van-cell-group inset>
      <van-field
        v-model="phone"
        name="pattern"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ pattern, message: '请填写手机号' }]"
      />
      <div style="display: flex">
        <van-field
          style="display: inline-block"
          v-model="code"
          name="用户名"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
        />
        <van-button
          plain
          type="primary"
          style="display: inline-block"
          @click="getcode"
          v-text="text1"
        ></van-button>
      </div>
      <van-field
        v-model="password"
        type="password"
        name="validator"
        label="密码"
        placeholder="密码"
        :rules="[{ validator, message: '请输入正确密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button
        round
        block
        type="primary"
        native-type="submit"
        @click="submit"
      >
        提交
      </van-button>



      <van-button
      style="margin-top:30px"
        round
        block
        type="default"
       @click="tologin"
       
      >
        返回
      </van-button>
    </div>
  </van-form>
</template>


<script lang="ts">
export default {
  name: "register",
};
</script>


<script setup lang="ts">
import { ref } from "vue";
import { reqGetVerfyCode, reqRegister } from "@/api/user";
import { useRouter } from "vue-router";
import { closeToast, showLoadingToast } from "vant";
const phone = ref(18234285334);
const router = useRouter();

const password = ref("111");
const code = ref();
const text1 = ref("获取验证码");
const issend = ref(false); //按钮事件触发之后的状态改变
const pattern = /^1[3456789]\d{9}$/;
const validator = (val) =>
  /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,15}$/.test(val);

const onSubmit = (values: any) => {
  console.log("submit", values);
};
const getcode = async () => {
  // console.log("按钮触发了",issend.value);
  if (issend.value) return; // 如果已经触发过了，就不能再触发了
  issend.value = true;
  // 开启一个倒计时
  let num = 10;
  let timeId = setInterval(() => {
    num--;
    if (num < 1) {
      issend.value = false;
      text1.value = "获取验证码";
      clearInterval(timeId);
      return;
    }
    text1.value = num + "秒后重新获取";
  }, 1000);
  const phone1 = Number(phone.value);
  const res = await reqGetVerfyCode(phone.value);
  code.value = res.data;
};
// 校验函数可以返回 Promise，实现异步校验
// const asyncValidator = async(val:any) =>
//   new Promise((resolve) => {
//     showLoadingToast('验证中...');

//     setTimeout( () => {
//     closeToast();
//        /* closeToast();
//       resolve(val === '1234'); */
//     }, 3000);

//   });

const submit = async () => {
  // console.log(typeof phone.value, 222);
  //  if(res.code !=200) return Promise.reject(new Error(res.message))

  const res = await reqRegister({
    phone: phone.value,
    password: password.value,
    code: code.value,
  });

  if (res.code === 200) {
    router.push("/login");
  }
};
function tologin(){
  router.push("/login")
}
</script>

<style scoped>
</style>